import Loading from "@/component/loading/loading";
import { message } from "antd";
import { useState } from "react";
import styles from "./realTimeData.module.scss";
const bgColor = [
    "linear-gradient(105deg, rgb(55 199 92 / 83%), rgb(52 108 205 / 72%))",
    "linear-gradient(105deg, rgb(55 199 183), rgb(52 108 205 / 72%))",
    "linear-gradient(105deg, rgb(58 55 199 / 71%), rgb(124 45 227 / 72%))",
    "linear-gradient(73deg, rgba(30, 98, 178, 0.768627451), rgb(22 25 127 / 81%))",
    "linear-gradient(47deg, rgba(8, 112, 235, 0.77), rgb(22 125 194))",
    "linear-gradient(73deg, rgb(88 217 249 / 45%), rgb(88 217 249))"
]
const ZuirealTimeData = ({
    loading = false,
    // API说明
    transparent, //背景透明
    wrap, //是否换行
    hideChildrenData = false, //是否隐藏右侧信息
    itemStyle, //对子item进行配置样式,仅支持width设置
    data = [], //最多建议4个
    hideTitle = false, //隐藏标题
    titleCenter = false, //标题居中
    hideHeader = false, //隐藏卡片header头
    title = "HorizontalBarChart", //卡片标题
    hideBtn = false, //隐藏切换按钮
    hideDownBtn = true, //隐藏下载按钮
    btn = ["全险种", "承保"], //按钮名称
    style,
}) => {
    const [current, setCurrent] = useState(0);
    const downClick = () => {
        message.success("已提交后台下载");
    };
    return (
        <>
            <div className={styles.card} style={{ ...style }}>
                <Loading loading={loading}>
                    <div
                        className={styles.card_center}
                    // style={{ backgroundColor: transparent ? "rgb(0,0,0,0)" : null }}
                    >
                        {hideHeader ? null : (
                            <div className={styles.card_header}>
                                <div
                                    className={styles.header_title}
                                    style={{ textAlign: titleCenter ? "center" : null }}
                                >
                                    {(title = hideTitle ? "" : title)}
                                </div>
                                <div className={styles.header_btn}>
                                    {btn.map((item, index) => {
                                        if (hideBtn) {
                                            return false;
                                        } else {
                                            return (
                                                <span
                                                    onClick={() => setCurrent(index)}
                                                    className={styles.header_btn_item}
                                                    key={index}
                                                    style={{
                                                        backgroundColor:
                                                            current === index ? "dodgerblue" : "",
                                                    }}
                                                >
                                                    {item}
                                                </span>
                                            );
                                        }
                                    })}
                                    {hideDownBtn ? null : (
                                        <span
                                            className={styles.header_btn_item}
                                            onClick={() => downClick()}
                                        >
                                            下载
                                        </span>
                                    )}
                                </div>
                            </div>
                        )}
                        <div
                            className={styles.info}
                            style={{ flexWrap: wrap ? "wrap" : null }}
                        >
                            {data.map((item, index) => {
                                return (
                                    <div
                                        className={styles.item}
                                        key={index}
                                        style={{ width: itemStyle.width }}
                                    >
                                        <div className={styles.item_center} style={{ backgroundImage: bgColor[index] || null }}>
                                            <div className={styles.item_title}>
                                                {item.title}（{item.unit}）
                                            </div>
                                            <div className={styles.item_main_info}>
                                                <span className={styles.item_main_info_count}>{item.value}</span>
                                                <span className={styles.item_main_info_sor}></span>
                                            </div>
                                            <div className={styles.item_other_info}>
                                                { item.childrenData.map((childrenItem, n) => {
                                                    return (
                                                        <div className={styles.item_other_info_item}>
                                                            <label htmlFor="">{childrenItem.title}</label>
                                                            <span>{childrenItem.value}</span>
                                                        </div>
                                                    );
                                                })}

                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </Loading>
            </div>
        </>
    );
};
export default ZuirealTimeData;
